<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get请求</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .title {
        margin-bottom: 20px;
    }

    .user {
        width: 50vw;
        height: 20vh;
        border: 1px solid red;
        margin: 50px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    button {
        margin-top: 50px;
        width: 7vw;
        height: 70px;
        background-color: rgb(222, 227, 227);
        border: 0;
        font-size: 15px;
    }
</style>

<body>
    <h1 id="title">
        学生个人信息:&nbsp;姓名:闫晨阳,学号:2022020405,班级:计应7班。
    </h1>
    <div class="user">
        
            <span>姓名</span>
            <input type="text" name="username" id="username">
        
     
             <span>班级</span>
            <input type="text" name="addr" id="addr"><br>

            <span>学号</span>
            <input type="text" name="studentid" id="studentid">
   

    </div>
    <button onclick="SendGet()">点击按钮<br>发送get请求<br>更新页面</button>
</body>
<script>
    function SendGet() {
        //接受页面里的内容
        let title = document.querySelector('#title')
        let name = document.querySelector('#username').value
        let addr = document.querySelector('#addr').value
        let studentid = document.querySelector('#studentid').value
        //拼接处地址加上输入框里的username和addr,
        let url = 'http://127.0.0.1:3000/user?username=' + name+ '&addr=' + addr +'&studentid='+ studentid 
        //拼接参数
        //发送请求
        let http = new XMLHttpRequest()

        http.open('get', url)
        http.send()
        http.onreadystatechange = function () {
            if (http.readyState === 4) {
                if (http.status >= 200 && http.status < 300) {
                    //因为输出的是字符串，所以在进行对象类型的转化
                    title.innerHTML = JSON.parse(http.responseText).welcome
                }
            }
        }
    }
</script>

</html>